<v-app>
  <div v-resize="resize" style="user-select: none; touch-action: none;">
    <setting v-on:order="order"></setting>
    <viewport ref="viewport"></viewport>
    <v-container v-show="!colord" fluid grid-list-md text-xs-center
      :style="{width:Math.min(size * 8, width) + 'px', height:size * 4.6 + 'px'}"
      style="padding: 0%; touch-action: none;">
      <v-layout row wrap>
        <v-flex xs12 style="display: flex;"
          :style="{'padding-left': size / 4 + 'px','padding-right': size / 4 + 'px','padding-bottom': size / 8 + 'px'}">
          <v-btn @click="tap('color')" :style="style" text :ripple="false" :disabled="recording">
            <v-icon :size="size * 0.8">colorize</v-icon>
          </v-btn>
          <v-btn @click="tap('output')" :style="style" text :ripple="false" :disabled="recording">
            <v-icon :size="size * 0.8">iso</v-icon>
          </v-btn>
          <v-btn @click="tap('snap')" :style="style" text :ripple="false" :disabled="recording">
            <v-icon :size="size * 0.8">camera_alt</v-icon>
          </v-btn>
          <v-btn @click="tap('film')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">{{recording?'stop':'movie'}}</v-icon>
          </v-btn>
          <v-btn @click="tap('share')" :style="style" text :ripple="false" :disabled="recording">
            <v-icon :size="size * 0.8">share</v-icon>
          </v-btn>
        </v-flex>
        <v-flex xs12>
          <v-text-field style="text-transform: none;" :height="size * 0.8"
            :style="{'padding-left': size / 4 + 'px','padding-right': size / 4 + 'px', 'margin-top':size/8 + 'px', 'font-size':size*0.4+'px'}"
            dense hide-details outlined single-line :disabled="recording" v-model="action">
            <v-btn tabindex="-1" slot="label" text style="margin: 0%; padding: 0%; min-width: 0%; min-height: 0%;"
              :style="{width:size * 0.4+'px',height:size * 0.8+'px'}">
              <v-icon :size="size * 0.4" style="vertical-align: middle;">theaters</v-icon>
            </v-btn>
            <v-btn tabindex="-1" slot="append" text style="margin: 0%; padding: 0%; min-width: 0%; min-height: 0%;"
              :style="{width:size * 0.4 + 'px',height:size * 0.8+'px'}" @click="scriptd=true" :disabled="recording">
              <v-icon :size="size * 0.4">edit</v-icon>
            </v-btn>
          </v-text-field>
        </v-flex>
      </v-layout>
      <playbar ref="playbar" :disable="recording"></playbar>
    </v-container>
    <v-bottom-sheet v-model="outputd">
      <v-card flat style="margin: auto; touch-action: none; user-select: none;">
        <v-container fluid grid-list-md text-xs-center :style="{width:Math.min(size * 8, width) + 'px'}">
          <v-layout row wrap justify-center align-center :style="{'padding-top':size * 0.2 + 'px'}">
            <v-flex xs2>
              <div :style="{'font-size':size * 0.3+'px'}">像素:</div>
            </v-flex>
            <v-flex xs10 style="display: flex;">
              <v-btn v-for="i in [128, 256, 512, 1024, 2048]" :key="i" @click="data.pixel=i;data.save();"
                :color="data.pixel == i?'primary':''" depressed style="text-transform: none; min-width: 0%; flex: 1;"
                :height="size * 0.8" :style="{'font-size':size * 0.3+'px'}">
                <div>{{i}}</div>
              </v-btn>
            </v-flex>
          </v-layout>
          <v-layout row wrap justify-center align-center :style="{'padding-top':size * 0.2 + 'px'}">
            <v-flex xs2>
              <div :style="{'font-size':size * 0.3+'px'}">格式:</div>
            </v-flex>
            <v-flex xs10 style="display: flex;">
              <v-btn v-for="i in ['gif', 'pngs']" :key="i" @click="data.filmt=i;data.save();"
                :color="data.filmt == i?'primary':''" depressed style="text-transform: none; min-width: 0%; flex: 1;"
                :height="size * 0.8" :style="{'font-size':size * 0.3+'px'}">
                <div>{{i.toUpperCase()}}</div>
              </v-btn>
            </v-flex>
          </v-layout>
          <v-layout row wrap justify-center align-center
            :style="{'padding-top':size * 0.2 + 'px', 'padding-bottom':size * 0.2 + 'px'}">
            <v-flex xs2>
              <div :style="{'font-size':size * 0.3+'px'}">间隔:</div>
            </v-flex>
            <v-flex xs10 style="display: flex;">
              <v-btn v-for="i in [2, 3, 4, 5, 6, 10]" :key="i" @click="data.delay=i;data.save();"
                :color="data.delay == i?'primary':''" depressed style="text-transform: none; min-width: 0%; flex: 1;"
                :height="size * 0.8" :style="{'font-size':size * 0.3+'px'}">
                <div>{{i}}</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-bottom-sheet>
    <v-bottom-sheet v-model="colord" hide-overlay persistent no-click-animation :retain-focus="false">
      <v-card flat style="margin: auto; touch-action: none; user-select: none;">
        <v-container fluid grid-list-md text-xs-center
          :style="{width:Math.min(size * 8, width) + 'px', height:size * 4.6 + 'px', 'padding-top': size * 0.3 + 'px'}">
          <v-layout row wrap>
            <v-flex v-for="item in colort" :key="item" xs3 :style="{padding:size * 0.06 + 'px'}">
              <v-btn @click="color = item;" :color="colors[item]" block depressed :ripple="false"
                style="min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;" :height="size">
                <v-icon :size="size * 0.8" v-show="color==item">colorize</v-icon>
              </v-btn>
            </v-flex>
            <v-flex xs3 :style="{padding:size * 0.06 + 'px'}">
              <v-btn @click="color = 'Core';" block depressed :ripple="false"
                style="min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;" :height="size">
                <v-icon :size="size * 0.8" v-show="color=='Core'">crop_din</v-icon>
                <div :style="{'font-size':size * 0.4+'px'}" v-show="color!='Core'">
                  底色
                </div>
              </v-btn>
            </v-flex>
            <v-flex xs3 :style="{padding:size * 0.06 + 'px'}">
              <v-btn @click="color = 'remove';" block depressed :ripple="false"
                style="min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;" :height="size">
                <v-icon :size="size * 0.8" v-show="color=='remove'">block</v-icon>
                <div :style="{'font-size':size * 0.4+'px'}" v-show="color!='remove'">
                  移除
                </div>
              </v-btn>
            </v-flex>
            <v-flex xs3 :style="{padding:size * 0.06 + 'px'}">
              <v-btn @click="reset" block depressed :ripple="false"
                style="min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;" :height="size" color="success">
                <div :style="{'font-size':size * 0.4+'px'}">
                  重置
                </div>
              </v-btn>
            </v-flex>
            <v-flex xs3 :style="{padding:size * 0.06 + 'px'}">
              <v-btn @click="clear" block depressed :ripple="false"
                style="min-width: 0%; min-height: 0%; margin: 0%; padding: 0%;" :height="size" color="error">
                <div :style="{'font-size':size * 0.4+'px'}">
                  清空
                </div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-bottom-sheet>
    <v-dialog v-model="scriptd" :width="Math.min(size * 8, width)">
      <v-card>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px'}">
            场景:
          </div>
        </v-card-title>
        <v-card-text style="text-transform: none; padding-bottom: 0%;">
          <v-textarea :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}" rows="2" no-resize solo flat
            outlined hide-details v-model="scene">
          </v-textarea>
        </v-card-text>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px'}">
            动作:
          </div>
        </v-card-title>
        <v-card-text style="text-transform: none;">
          <v-flex xs12 style="display: flex;">
            <v-btn depressed @click="tap('expand')" :height="size * 0.8" color="success" style="flex: 1;">
              <div :style="{'font-size':size/3+'px'}">展开</div>
            </v-btn>
            <v-btn depressed @click="tap('clear')" :height="size * 0.8" color="error" style="flex: 1;">
              <div :style="{'font-size':size/3+'px'}">清空</div>
            </v-btn>
          </v-flex>
          <v-textarea :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}" rows="6" no-resize solo flat
            outlined hide-details v-model="action">
          </v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs12 d-flex>
              <v-btn block text @click="scriptd = false;" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">确定</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="shared" :width="Math.min(size * 8, width)" eager>
      <v-card>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px','padding-top':size/8+'px'}">
            分享链接:
          </div>
        </v-card-title>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs12 d-flex>
              <v-textarea id="link" :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}" solo flat
                outlined hide-details v-model="link">
              </v-textarea>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block text @click="tap('open')" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">打开</div>
              </v-btn>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block text @click="shared = false;" :height="size * 0.8" data-clipboard-target="#link" ref="copy">
                <div :style="{'font-size':size/3+'px'}">复制</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</v-app>